<template>
  <div style="display:flex;flex-direction:row;align-items:center;">
    <el-tag type="warning"  effect="dark">{{ info.name }}</el-tag>
    ({{ info.type }})
    <el-tag>{{ info.host }}</el-tag><el-tag>{{ info.dbName }}</el-tag>

    <!--    <el-switch v-model="$data.withGroup" style="margin-left: 20px"></el-switch>-->
    <!--    <div v-if="$data.withGroup">分组</div>-->
    <!--    <div v-else>合并</div>-->
    <el-button size="small" style="margin-left:8px;" v-if="$data.withGroup && !$props.readonly"
               @click="save_group_click">保存分组
    </el-button>

    <el-switch v-model="$data.withCn" style="margin-left: 20px"></el-switch>
    <div v-if="$data.withCn">显示中文</div>
    <div v-else>仅显示英文</div>
  </div>
  <div>

    <template v-if="$data.withGroup">
      <div v-for="(item) in group_tables" :key="item.key" class="gt bc5">
        <div>
          <kp :label="item.key">
            <input v-model="info.groupMap[item.key]" :disabled="$props.readonly"/>
          </kp>
          <button v-if="item.data.length > 2" @click="select(item)" style="margin-left: 6px">反选</button>
        </div>

        <selector style="width:80%" multi
                  :data="item.data"
                  v-model="$data.select_tables"
                  :enum-count="999"
                  @change="changed"
                  :fields="$data.withCn ? 'id,nameWithCn':'name' "
        ></selector>
      </div>
    </template>
    <div v-else class="gt">
      <selector style="width:80%" multi
                :data="$data.tables"
                v-model="$data.select_tables"
                :enum-count="999"
                @change="changed"
                :fields="$data.withCn ? 'id,nameWithCn':'name' "
      ></selector>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: "tables-com",
  inheritAttrs: true,
});


//定义data
const $data = reactive({
  level: 2,
  packageName: "",
  withGroup: true,
  withCn: true,
  tables: [],
  select_tables: [],
  table_url: "",
  info: {},
  DatabaseEnum: jv.enum.SqlDatabaseEnum.getData(),
  tab: "all",
  group_markdown: {},
  markdown_all: ""
});
const $props = defineProps({
  id: {type: String},
  tables: {type: Array},
  info: {type: Object},
  readonly: {type: Boolean},
});

const info = $computed(() => $data.info);

watch(() => $props.tables, v => {
  if (v && v.length) {
    $data.tables = $props.tables;
  }
},{immediate: true});

watch(() => $props.info, v => {
  if (v && v.id) {
    $data.info = v;
  }
},{immediate: true})


const $emit = defineEmits(["update:modelValue", "loaded", "change", "select"]);

const group_tables = $computed(function () {
  return $data.tables
      .groupBy(it => {
        if (it.comment.includes("-")) {
          return it.comment.split("-")[0].trim()
        } else {
          return it.name.split("_")[0]
        }
      })
      .sort((a, b) => {
        var g1 = $data.info.groupMap[a.key] || a.key;
        var g2 = $data.info.groupMap[b.key] || b.key;
        if (g1 == g2) {
          return a.data.length - b.data.length;
        }
        if (g1 > g2) {
          return 1;
        }
        return -1;
      });
});

const save_group_click = () => {
  if (!$props.id) return;
  jv.$http.post("/dev/db-connection/" + $props.id + "/set-group", $data.info.groupMap);
}

const loadData = function () {
  if (!$props.id) return;
  if (!$data.info || !$data.info.id) {
    jv.$http.post("/dev/db-connection/detail/" + $props.id).then(res => {
      $data.info = res.data.data;
      $emit("loaded", {info: $data.info})
    });
  }

  if (!$data.tables || !$props.tables || !$props.tables.length) {
    jv.$http.post('/dev/db-entity/tables/' + $props.id).then(res => {
      $data.tables = res.data.data.filter(it => !it.name.startsWith("flyway") && !it.comment.startsWith("-"));
      $data.tables.forEach(it => {
        it.id = it.name;
        it.columns = it.columns.filter(it => !it.comment.startsWith("-"))
        it.nameWithCn = it.name;
        if (it.simpleComment) {
          it.nameWithCn = it.name + " : " + it.simpleComment;
        }
      })


      $emit("loaded", {tables: $data.tables})
    })


    jv.$http.post('/dev/db-entity/indexes/' + $props.id).then(res => {
      $emit("loaded", {indexes: res.data.data, type:"index"})
    })
  }
};


const changed = function () {
  $emit("change", $data.select_tables);
}

onMounted(function () {
  loadData();
})
</script>


<style scoped lang="scss">
.gt {
  padding: 8px;
  border-radius: 5px;
  margin: 2px;
}


.list-page .kv ::v-deep(.k) {
  flex: 1 !important;
}

::v-deep(.kp) input {
  border-width: 0;
}
</style>